<template>
	<view class="step-info">
		<block v-for="(item,index) in stepList" :key="index">
			<view class="card-item" :class="step>(index+1)?'active-bg':'default'"
				:style="index<stepList.length-1?'':'border:solid rgba(0,0,0,0) 6rpx;'">
				{{mess}}
				<view :class="step>(index+1)?'item-state3':step==(index+1)?'item-state2':'item-state1'">
					<!-- {{step>(index+1)?'':index+1}} -->
				</view>
				<view class="step-content">
					<template :style="step==index+1?'color:'+selectFontColor:'color:'+fontColor"
						v-for="(mess,index) in item">
						<view class="message-info" :class="index">{{mess}}</view>
					</template>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			//当前步骤
			step: {
				type: Number,
				default: 1
			},
			//步骤列表
			stepList: {
				type: Array,
				default: null
			},
			//默认字体颜色
			fontColor: {
				type: String,
				default: '#666666'
			},
			//当前步骤字体颜色
			selectFontColor: {
				type: String,
				default: '#287BF8'
			}
		},
		data() {
			return {}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.step-info {
		width: 100%;
		height: auto;
		padding-top: 40rpx;
		margin-top: 24rpx;
		

		.active-bg {
			border-left: solid #F3360D 3px !important;
		}

		.card-item {
			width: calc(100% - 48rpx);
			height: auto;
			border-left: solid #EDEDED 6rpx;
			position: relative;
			padding-top: 1px;
			margin: 54rpx 0rpx 0rpx 24rpx;
			padding-bottom: 10rpx;

			.item-state1 {
				width: 16rpx;
				height: 16rpx;
				background-color: #EDEDED;
				border-radius: 50%;
				font-size: 24rpx;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				margin-top: -36rpx;
				margin-left: -12rpx;
			}

			.item-state2 {
				width: 16rpx;
				height: 16rpx;
				background: #F3360D;
				border-radius: 50%;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				margin-top: -40rpx;
				margin-left: -12rpx;
			}

			.item-state3 {
				width: 16rpx;
				height: 16rpx;
				background: #F3360D;
				border-radius: 50%;
				position: absolute;
				margin-top: -36rpx;
				margin-left: -10rpx;
			}

			.step-content {
				margin-left: 48rpx;
				margin-top: -45rpx;


				.message-info {
					width: 100%;
					text-align: left;
					color: #999999;
					font-size: 30rpx;
					line-height: 30rpx;
					margin-bottom: 24rpx;
				}

				.name {
					font-size: 34rpx;
					color: #333333
				}

			}
		}
	}
</style>